<template>
    <view style="padding-bottom: 200rpx" class="wanl-order-list wanl-list">
        <view class="head" :class="{ headtop: scrollStype }">
            <view class="cue">
                <view class="bar" style="justify-content: space-around">
                    <view class="item" :class="{ current: tabCurrentIndex === 0 }" @tap="tabClick(0)">积分商品</view>
                    <view class="item" :class="{ current: tabCurrentIndex === 1 }" @tap="tabClick(1)">商品商品</view>
                </view>
            </view>
        </view>
        <view class="navbar">
            <view
                class="nav-item text-df"
                v-for="(item, index) in tabList"
                :key="item.status"
                :class="{ current: tabCurrentIndex2 === index + 1 }"
                @tap="tabClick2(index + 1)"
            >
                {{ item.name }}
            </view>
        </view>
        <view class="all">
            <view class="card" v-for="(item, index) in commodityList" :key="index">
                <view class="flex u-row-left">
                    <image :src="item.image" mode="aspectFill" class="head-img"></image>
                    <view class="cont">
                        <view class="name u-line-2">{{ item.title || item.name }}</view>
                        <view class="u-flex justify-between margin-top-sm">
                            <view class="price" v-if="item.price"><text>￥</text>{{ item.price }}</view>
                            <view class="price" v-if="item.score">{{ item.score }}<text>积分</text></view>
                            <view class="number">库存：{{ item.stock }} </view>
                        </view>
                    </view>
                </view>
                <view class="flex justify-between u-p-t-30 margin-top-sm u-border-top">
                    <view class="time" style="color: #606dce" v-if="item.status == '1' || item.status == 'normal'"
                        >已上架
                    </view>
                    <view class="time" style="color: #606dce" v-if="item.status == '0' || item.status == 'hidden'"
                        >已下架
                    </view>
                    <!-- <view class="time">仓库中</view> -->
                    <!-- <view class="time" style="color: #FF0000;" v-if="current==2">已售罄</view> -->
                    <view class="flex" v-if="item.status == 'normal' || item.status == '1'">
                        <view class="button button1" @click="cancelDown(item.id)">下架</view>
                        <view class="button" @click="edit(item.id)">编辑</view>
                    </view>
                    <view class="flex" v-if="item.status == 'hidden' || item.status == '0'">
                        <view class="button button1" @click="del(item.id)">删除</view>
                        <view class="button button1" @click="edit(item.id)">编辑</view>
                        <view class="button" @click="confirmUP(item.id)">上架</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- <u-popup v-model="show_screen" mode="top" border-radius="20">
            <view class="pop">
                <view class="u-p-30">
                    <u-search
                        placeholder="请输入产品标题"
                        v-model="keyword"
                        bg-color="#F6F6F6"
                        :show-action="false"
                        @search="search"
                    ></u-search>
                    <view class="flex justify-between u-p-t-30">
                        <picker :range="sjlist" range-key="name" @change="chosesj">
                            <view class="box-item flex">
                                <text>{{ sjname ? sjname : "上架状态" }}</text>
                                <!-- <image :src="imgUrl + '/static/yCreate/bot.png'" mode="widthFix"></image> --
                            </view>
                        </picker>
                        <picker :range="shlist" range-key="name" @change="chosesh">
                            <view class="box-item flex" style="margin-left: 20rpx">
                                <text>{{ shname ? shname : "审核状态" }}</text>
                                <!-- <image :src="imgUrl + '/static/yCreate/bot.png'" mode="widthFix"></image> --
                            </view>
                        </picker>
                        <view class="" style="flex: 1"> </view>
                        <!-- <view class="box-item flex">
							<text>商品类目</text>
							<image src="@/static/yCreate/bot.png" mode="widthFix"></image>
						</view>
						<view class="box-item flex">
							<text>更新时间</text>
							<image src="@/static/yCreate/bot.png" mode="widthFix"></image>
						</view> --
                    </view>
                    <view class="options-item u-border-bottom">
                        <view class="title">价格</view>
                        <view class="u-flex u-flex-wrap">
                            <view
                                class="options-box flex"
                                v-for="(item, index) in priceList"
                                :class="{ 'select-box': priceIdx == index }"
                                @click="checkIdx(index, 1)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                    <view class="options-item u-border-bottom">
                        <view class="title">创建时间</view>
                        <view class="u-flex u-flex-wrap">
                            <view
                                class="options-box flex"
                                v-for="(item, index) in timeList"
                                :class="{ 'select-box': timeIdx == index }"
                                @click="checkIdx(index, 2)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                    <view class="options-item">
                        <view class="title">销量</view>
                        <view class="u-flex u-flex-wrap">
                            <view
                                class="options-box flex"
                                v-for="(item, index) in salesVolume"
                                :class="{
                                    'select-box': salesVolumeIdx == index,
                                }"
                                @click="checkIdx(index, 3)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="u-flex">
                    <view class="btn flex" @click="show_screen = false">取消</view>
                    <view class="btn btn2 flex" @click="sxbtn">确定</view>
                </view>
            </view>
        </u-popup> -->
        <!-- <u-select v-model="show" :list="picklist" confirm-color="#46c289" @confirm="confirm2"></u-select> -->
        <uv-tabbar :value="currentTab" @change="changeTab">
            <uv-tabbar-item :text="item.text" v-for="(item, index) in tabsList" :key="index">
                <!-- <template v-slot:active-icon>
                    <image class="icon" :src="item.iconPath"></image>
                </template>
<template v-slot:inactive-icon>
                    <image class="icon" :src="item.selectedIconPath"></image>
                </template> -->
            </uv-tabbar-item>
        </uv-tabbar>
        <view class="xzbtn">
            <view class="add btn" style="text-align: center; line-height: 80rpx" @click="goAdd()">新增产品</view>
        </view>
        <wanl-empty v-if="commodityList.length === 0" src="collect_default3x" text="暂无数据" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            imgUrl: this.$imgUrl,

            tabCurrentIndex2: 0, // 当前tab的index
            tabList: [
                {
                    name: "已上架",
                },
                {
                    name: "仓库中",
                },
                // {
                //     name: "审核中",
                // },
                // {
                //     name: "待修改",
                // },
            ],
            priceIdx: 0,
            timeIdx: 0,
            salesVolumeIdx: 0,
            priceList: ["50以下", "50-100", "100-300", "300-1000"],
            timeList: ["3天之内", "3-7天", "7-30天", "30天以上"],
            salesVolume: ["0-500", "500-1000", "1000以上"],
            show_screen: false,
            keyword: "",
            flowList: [],
            current: 0,
            type: "-1",
            show: false,
            commodityList: [],
            tabsList: [
                {
                    // iconPath: imgUrl + "/static/wdcp-fl.png",
                    // selectedIconPath: imgUrl + "/static/wdcp-fl-active.png",
                    text: "商品",
                },
                // {
                // iconPath: imgUrl + "/static/wdcp-dd.png",
                // selectedIconPath: imgUrl + "/static/wdcp-dd-active.png",
                //     text: "订单",
                // },
                // {
                // iconPath: imgUrl + "/static/wdcp-sh.png",
                // selectedIconPath: imgUrl + "/static/wdcp-sh-active.png",
                //     text: "审核",
                // },
                // {
                // iconPath: imgUrl + "/static/wdcp-yf.png",
                // selectedIconPath: imgUrl + "/static/wdcp-yf-active.png",
                //     text: "运费",
                // },
                {
                    // iconPath: imgUrl + "/static/wdcp-wd.png",
                    // selectedIconPath: imgUrl + "/static/wdcp-wd-active.png",
                    text: "订单",
                },
                {
                    // iconPath: imgUrl + "/static/wdcp-wd.png",
                    // selectedIconPath: imgUrl + "/static/wdcp-wd-active.png",
                    text: "我的",
                },
            ],
            currentTab: 0,
            page: 1,
            sjlist: [
                {
                    name: "上架",
                },
                {
                    name: "下架",
                },
            ],
            sjname: "",
            shlist: [
                {
                    id: 1,
                    name: "待审核",
                },
                {
                    id: 2,
                    name: "已审核",
                },
                {
                    id: 3,
                    name: "驳回",
                },
            ],
            shname: "",
            shid: "",
            picklist: [],
            tabCurrentIndex: 0,
            scrollStype: false, //滚动状态
            params: {
                page: 1,
            },
        };
    },
    // 监听滚动
    onPageScroll(object) {
        if (object.scrollTop > this.WanlScroll) {
            this.scrollStype = false;
        } else {
            this.scrollStype = true;
        }
        if (object.scrollTop < 0) {
            this.scrollStype = false;
        }
        this.WanlScroll = object.scrollTop;
    },
    mounted() {
        this.getScoreList(1); //获取商品--积分
    },
    onLoad(options) {
        this.tabCurrentIndex = 0;
        this.tabCurrentIndex2 = 1;
    },
    methods: {
        //却换tab
        tabClick2(type) {
            this.commodityList = [];
            this.params.page = 1;
            this.tabCurrentIndex2 = type;
            if (this.tabCurrentIndex == 0) {
                this.getScoreList(type);
            } else if (this.tabCurrentIndex == 1) {
                this.getShopList(type);
            }
        },
        //顶部tab点击
        tabClick(index) {
            this.commodityList = [];
            this.params.page = 1;
            this.tabCurrentIndex = index;
            if (index == 0) {
                this.getScoreList(this.tabCurrentIndex2 == 2 ? 2 : 1);
            } else if (index == 1) {
                this.getShopList(this.tabCurrentIndex2 == 2 ? 2 : 1);
            }
        },
        getScoreList(type) {
            uni.request({
                url: "/shop.score/GetScoreGoodsList",
                method: "POST",
                data: {
                    page: this.params.page,
                    status: type,
                },
                success: (res) => {
                    uni.stopPullDownRefresh();
                    this.status = "more";
                    this.commodityList = this.reload ? res.res.data.data : this.commodityList.concat(res.res.data.data); //数据 追加
                    this.params.page = res.res.data.current_page; //当前页码
                    this.last_page = res.res.data.last_page; //总页码
                },
            });
        },
        getShopList(type) {
            uni.request({
                url: "/shop.shop/ShopGoodsList",
                method: "POST",
                data: {
                    page: this.params.page,
                    status: type,
                },
                success: (res) => {
                    uni.stopPullDownRefresh();
                    this.status = "more";
                    this.commodityList = this.reload ? res.res.data.data : this.commodityList.concat(res.res.data.data); //数据 追加
                    this.params.page = res.res.data.current_page; //当前页码
                    this.last_page = res.res.data.last_page; //总页码
                },
            });
        },
        //上架商品 -- 积分
        confirmUP(id) {
            uni.showModal({
                title: "提示",
                content: "是否确认上架该商品",
                success: async (res) => {
                    if (res.confirm) {
                        if (this.tabCurrentIndex == 0) {
                            await uni.request({
                                url: "/shop.score/EditGoodsStatus",
                                method: "POST",
                                data: {
                                    ids: id,
                                    type: 1,
                                },
                                success: (res) => {
                                    uni.showToast({
                                        title: "上架成功",
                                        icon: "none",
                                        mask: true,
                                    });
                                    this.commodityList = [];
                                    this.getScoreList(this.tabCurrentIndex2);
                                },
                            });
                        } else if (this.tabCurrentIndex == 1) {
                            await uni.request({
                                url: "/shop.shop/EditGoodsStatus",
                                method: "POST",
                                data: {
                                    ids: id,
                                    type: 1,
                                },
                                success: (res) => {
                                    uni.showToast({
                                        title: "上架成功",
                                        icon: "none",
                                        mask: true,
                                    });
                                    this.commodityList = [];
                                    this.getShopList(this.tabCurrentIndex2);
                                },
                            });
                        }
                    }
                },
            });
        },
        //下架商品--积分
        cancelDown(id) {
            uni.showModal({
                title: "提示",
                content: "是否确认下架该商品",
                success: async (res) => {
                    if (res.confirm) {
                        if (this.tabCurrentIndex == 0) {
                            await uni.request({
                                url: "/shop.score/EditGoodsStatus",
                                method: "POST",
                                data: {
                                    ids: id,
                                    type: 2,
                                },
                                success: (res) => {
                                    console.log(res, "修改状态");
                                    uni.showToast({
                                        title: "商品已下架",
                                        icon: "none",
                                        mask: true,
                                    });
                                    this.commodityList = [];
                                    this.getScoreList(this.tabCurrentIndex2);
                                },
                            });
                        } else if (this.tabCurrentIndex == 1) {
                            await uni.request({
                                url: "/shop.shop/EditGoodsStatus",
                                method: "POST",
                                data: {
                                    ids: id,
                                    type: 2,
                                },
                                success: (res) => {
                                    console.log(res, "修改状态");
                                    uni.showToast({
                                        title: "商品已下架",
                                        icon: "none",
                                        mask: true,
                                    });
                                    this.commodityList = [];
                                    this.getShopList(this.tabCurrentIndex2);
                                },
                            });
                        }
                    }
                },
            });
        },
        //删除
        del(id) {
            var that = this;
            uni.showModal({
                title: "提示",
                content: "是否确认删除该商品",
                success: async (res) => {
                    if (res.confirm) {
                        if (this.tabCurrentIndex == 0) {
                            await uni.request({
                                url: "/shop.score/DelScoreGoods",
                                method: "POST",
                                data: {
                                    goods_id: id,
                                },
                                success: (res) => {
                                    uni.showToast({
                                        title: "删除成功",
                                        icon: "none",
                                        mask: true,
                                    });
                                    this.commodityList = [];
                                    this.getScoreList(this.tabCurrentIndex2);
                                },
                            });
                        } else if (this.tabCurrentIndex == 1) {
                            await uni.request({
                                url: "/shop.shop/del",
                                method: "POST",
                                data: {
                                    ids: id,
                                },
                                success: (res) => {
                                    uni.showToast({
                                        title: "删除成功",
                                        icon: "none",
                                        mask: true,
                                    });
                                    this.commodityList = [];
                                    this.getShopList(this.tabCurrentIndex2);
                                },
                            });
                        }
                    }
                },
            });
        },
        checkIdx(index, type) {
            if (type == 1) {
                this.priceIdx = index;
            } else if (type == 2) {
                this.timeIdx = index;
            } else {
                this.salesVolumeIdx = index;
            }
        },
        confirm2(e) {
            console.log(e);
        },

        change(index) {
            this.page = 1;
            this.current = index;
            this.getScoreList();
        },
        changeTab(e) {
            this.currentTab = e;
            if (e == 1) {
                uni.redirectTo({ url: "/pages/merchant/merOrder" });
            } else if (e == 2) {
                uni.redirectTo({ url: "/pages/merchant/mine" });
            }
        },

        //上架
        confirm(id) {
            // this.$u
            //     .post("/api/shop/xj_sj_goods", {
            //         ids: id,
            //         type: 2,
            //     })
            //     .then((res) => {
            //         if (res.code == 1) {
            //             uni.showToast({
            //                 title: "商品上架成功",
            //                 icon: "none",
            //                 duration: 3000,
            //             });
            //             this.getScoreList();
            //         }
            //     });
        },

        //编辑
        edit(id) {
            if (this.tabCurrentIndex == 0) {
                uni.navigateTo({
                    url: `/pages/merchant/editScoreGoods?id=${id}`,
                });
            } else if (this.tabCurrentIndex == 1) {
                uni.navigateTo({
                    url: `/pages/merchant/editGoods?id=${id}`,
                });
            }
        },
        goAdd() {
            if (this.tabCurrentIndex == 0) {
                uni.navigateTo({
                    url: "/pages/merchant/addScore",
                });
            } else if (this.tabCurrentIndex == 1) {
                uni.navigateTo({
                    url: "/pages/merchant/addProducts",
                });
            }
        },
        chosesj(e) {
            this.sjname = this.sjlist[e.detail.value].name;
            this.current = e.detail.value;
        },
        chosesh(e) {
            this.shname = this.shlist[e.detail.value].name;
            this.shid = this.shlist[e.detail.value].id;
        },
        sxbtn() {
            this.getScoreList();
            this.show_screen = false;
        },
    },
    onReachBottom() {
        this.params.page = Number(this.params.page) + 1;
        this.getScoreList();
    },
};
</script>

<style lang="scss" scoped>
page {
    background-color: #f6f6f6;
}

.tabs {
    position: sticky;
    top: 0;
    z-index: 98;
    background-color: #fff;
    padding: 0 20rpx;

    .screen {
        width: 40rpx;
        height: auto;
    }
}

.all {
    padding: 0 24rpx;

    .card {
        width: 100%;
        margin-top: 18rpx;
        padding: 30rpx 20rpx;
        background: #ffffff;
        border-radius: 10rpx;

        .head-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }

        .cont {
            width: 100%;

            .name {
                margin-bottom: 22rpx;
                font-size: 28rpx;
            }

            .content {
                font-size: 24rpx;
                color: #888888;
            }

            .bot {
                margin-top: 40rpx;
                font-size: 26rpx;
                color: #888;

                .price {
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #da0000;
                }

                text {
                    font-size: 32rpx;
                }
            }

            .price {
                font-size: 40rpx !important;
                font-weight: 550;
                color: #ef5205;

                text {
                    font-weight: 500;
                    font-size: 20rpx;
                }
            }

            .number {
                font-size: 24rpx;
                color: #888888;
            }
        }
    }
}

.time {
    font-size: 24rpx;
    color: #888888;
}

.button {
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140rpx;
    height: 52rpx;
    background: linear-gradient(135deg, #ff4950 0, #ff8123 100%);
    border-radius: 40rpx;
    font-size: 24rpx;
    color: #ffffff;
}

.button1 {
    border: 1rpx solid #888888;
    background: #fff;
    color: #888888;
}

.pop {
    .box-item {
        width: 157rpx;
        height: 52rpx;
        background: #f6f6f6;
        border-radius: 40rpx;
        font-size: 24rpx;

        image {
            margin-left: 10rpx;
            width: 20rpx;
            height: auto;
        }
    }

    .options-item {
        padding: 30rpx 0 0 0;

        .title {
            margin-bottom: 20rpx;
            font-size: 28rpx;
            font-weight: bold;
        }

        .options-box {
            margin: 0 30rpx 30rpx 0;
            width: 180rpx;
            height: 52rpx;
            background: #f5f5f5;
            color: #888888;
            border-radius: 40rpx;
            font-size: 24rpx;
        }

        .select-box {
            background: linear-gradient(135deg, #ff4950 0, #ff8123 100%);
            color: #ffffff;
        }
    }

    .btn {
        width: 50%;
        height: 100rpx;
        background: #f6f6f6;
        font-size: 28rpx;
        font-weight: bold;
    }

    .btn2 {
        background: #606dce;
        color: #ffffff;
    }
}

.u-drawer {
    z-index: 999 !important;
}

.add {
    width: 200rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    background: linear-gradient(135deg, #ff4950 0, #ff8123 100%);
    border-radius: 40rpx;
}

.btn {
    width: 630rpx;
    height: 80rpx;
}

.xzbtn {
    // background: #fff;
    position: fixed;
    /* #ifdef H5 */
    bottom: 110rpx;
    /* #endif */
    width: 100%;
    // z-index: 999;
    /* #ifdef MP */
    bottom: 200rpx;
    /* #endif */
}
</style>
